<template>
	<view class="main">

            <span class="cgxz">参观须知</span><br>
		    
			<view class="zhengw">
				<view id="tips">
					<text>一、开放时间</text>
				</view>
				<view class="zwk">
					<text class="zw">1、每周三、周六(10:00-17:00)为科技馆固定开放时间;<br>
        2、固定节假日及寒暑假或疫情管控等不可抗力因素导致的开馆时间 </br>
        另行在“袁隆平杂交水稻科学园”公众号上进行公告；<br>
        3、团体参加请提前预约后参观，预约电话:稻子老师18282678000、
        苗苗老师18780583050。</text>
				</view>
					
				
				
        <view id="tips">
        	 <text>二、开放方式</text>
        </view>
               <view class="zwk">
               	<text class="zw">1、固定时间对个人免费开放;<br>	
        2、如需讲解服务，可进行预约，预约电话:稻子老师18282678000、
        苗苗老师18780583050。</text>
               </view>
               	
               
				
        <view id="tips">
        	<text>三、注意事项</text>
        </view>
                <view class="zwk">
                	<text class="zw"> 1、本场馆为公益性场馆，对个人免费开放，未经许可严禁任何单位   
        和个人在科技馆内从事营利性商业活动，一经发现，即刻劝离科技馆。<br />
        2、严禁携带易燃易爆品、危险品进入展馆;禁止在展馆内吸烟或使用 
        明火。<br />
        3、衣冠不整者谢绝入馆:楚止携带宠物入馆。<br />
        4、幼儿、高龄老人、行动不便者请在监护人陪伴下入馆。<br />
        5、携带饮料、食品、金属物件、颜料、伞具等入关前请自行处理，不 
        得携带入馆。<br />
        6、爱护公共设施，不得随意触摸展品，互动项目参观，请按照本馆工 
        作人员的要求进行操作，如损坏公物或展品，本馆有权要求损坏物品
        者作出相应赔偿。<br />
        7、请配合保持安静和馆内清洁卫生。<br />
        8、参观过程中，请听从本馆工作人员的安排，有序参观;如有特殊情
        况，可寻求本馆工作人员的指导和帮助。</text>
                </view>
                	
                
				
     
			</view>

		
	</view>
	<br />
	  <div class="checkbox-container">
	    <input type="checkbox" id="checkbox1"  v-model="isAgreementChecked" @change="handleCheckChange"/>
	    <label for="checkbox1">我已阅读并接受预约须知</label>
	  </div>
    <br />
    <div class="button-wrapper" data-tippy-content="Click to copy button 18" @tap="goDetail()">
            <button :disabled="!isAgreementChecked" @click="goToNextPage" class="button-18" role="button">选择时段</button>
          </div>
	<br />
	
</template>

<script >
	export default {
		data() {
			 return {  
			      isAgreementChecked: false, // 勾选框的状态  
			      showModal: false, // 控制弹窗的显示与隐藏  
		    };
			},
		     methods: {
			goDetail(){
				uni.navigateTo({url: '../yy/Timeserve'});
			},
			// 勾选框状态变化时的方法  
			handleCheckChange() {  
			      if (this.isAgreementChecked) {  
			        this.showModal = false; // 如果已勾选，则关闭弹窗  
			      }  
			    },  
			    // 关闭弹窗的方法  
			closeModal() {  
			      this.showModal = false;  
			    },  
			    // 点击按钮进入下一页的方法  
			goToNextPage() {  
			      // 这里可以添加进入下一页的逻辑，例如路由跳转  
			      console.log('进入下一页');  
			      // 示例：使用vue-router进行页面跳转  
			      // this.$router.push('/next-page');
					
			    },
			buttonClick() {  
				        if (!this.isAgreementChecked) {  
				          this.showModal = true; // 如果未勾选，则显示弹窗  
				        } else {  
				          this.goToNextPage(); // 如果已勾选，则直接执行进入下一页的逻辑  
				        }  
				},
		    },
	}
	//发请求
	uni.request({
	
	})
</script>

<style>
	.main{
		width: 351px;
		height: 708px;
		background-image:url(../../static/knowsbj.png);
      background-size: cover;
	  margin-top: 20px;
	  margin-left: 12px;
	}
	.cgxz{
		width: 72px;
		height: 25px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 18px;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
		margin-left: 140px;
		margin-top: 43px;
	}
	.zwk{
		margin-left: 24px;
	}
	
.zw{
	color: #393939;
	font-size: 14px;
	font-face: PingFangSC;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0px;
	paragraph-spacing: 0px;
	text-align: left;
	margin-left: 0px;
}
.tips{
 color: #000000;
 font-size: 14px;
 font-face: PingFangSC;
 font-weight: 500;
 line-height: 21px;
 letter-spacing: 0;
 paragraph-spacing: 0;
 text-align: left;
}
	.wz{
		 color: #393939;
		 font-size: 14px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 21px;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
	}

	.checkbox-container {
	  display: flex;
	  align-items: center;
	  margin-left: 12px;
	  color: #5b5b5b;
	  font-size: 12px;
	  font-face: PingFangSC;
	  font-weight: 400;
	  line-height: 21px;
	  letter-spacing: 0;
	  paragraph-spacing: 0;
	}
	 
	input[type="checkbox"] {
	  margin-right: 5px; /* 可以根据需要调整间距 */
	}
	 
	label {
	  cursor: pointer;
	}
	.xzsd{
		width: 351px;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
	}

	.gxk{
		width: 12px;
		height: 12px;
		margin-left: 12px;
	
	}
	 .button-18 {
		 width: 351px;
		 height: 45px;
		 margin-left: 12px;
	              align-items: center;
	              background-color: #8DCB6D;
	              border: 0;
	              border-radius: 100px;
	              box-sizing: border-box;
	              color: #ffffff;
	              cursor: pointer;
	              display: inline-flex;
	              font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
	              font-size: 16px;
	              font-weight: 600;
	              justify-content: center;
	              line-height: 20px;
	              max-width: 480px;
	              min-height: 40px;
	              min-width: 0px;
	              overflow: hidden;
	              padding: 0px;
	              padding-left: 20px;
	              padding-right: 20px;
	              text-align: center;
	              touch-action: manipulation;
	              transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	              user-select: none;
	              -webkit-user-select: none;
	              vertical-align: middle;
	            }
	  
	            .button-18:hover,
	            .button-18:focus { 
	              background-color: #8DCB6D;
	              color: #ffffff;
	            }
	  
	            .button-18:active {
	              background: #6e9d54;
	              color: rgb(255, 255, 255, .7);
	            }
	  
	            .button-18:disabled { 
	              cursor: not-allowed;
	              background: rgba(0, 0, 0, .08);
	              color: rgba(0, 0, 0, .3);
	            }
				.modal {  
				  /* 弹窗样式，可以根据需要自定义 */  
				  position: fixed;  
				  top: 50%;  
				  left: 50%;  
				  transform: translate(-50%, -50%);  
				  background-color: white;  
				  border: 1px solid #ccc;  
				  padding: 20px;  
				  z-index: 1000;  
				  }
</style>